<template>
  <div class="exam-config-container">
    <div class="header">
      <h1>考试信息配置</h1>
    </div>

    <div class="content">
      <el-card class="box-card">
        <div class="exam-config">
          <h3>考试信息配置</h3>
          <el-form :model="examForm" :rules="rules" ref="examFormRef" label-width="120px">
            <el-form-item label="班级考试编号" prop="examNumber">
              <el-input v-model="examForm.examNumber" placeholder="请输入班级考试编号" />
            </el-form-item>
            <el-form-item label="考试机房名称" prop="computerRoomId">
              <el-select
                  v-model="examForm.computerRoomId"
                  placeholder="请选择机房"
                  clearable
              >
                <el-option
                    v-for="room in computerRooms"
                    :key="room.labId"
                    :label="room.labName"
                    :value="room.labId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="考试日期" prop="examDate">
              <el-date-picker
                  v-model="examForm.examDate"
                  type="date"
                  placeholder="选择考试日期"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-form>
        </div>

        <div class="actions">
          <el-button type="primary" @click="submitExamConfig">保存配置</el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const route = useRoute();
const router = useRouter();
import { getComputerRooms, saveExamConfig } from "@/api/schoolmanage/classes.js";


// 考试表单
const examForm = ref({
  examNumber: '',
  computerRoomId: '', // 改为机房ID
  examDate: '',
});
// 机房列表
const computerRooms = ref([]);
// 表单验证规则
const rules = {
  examNumber: [
    { required: true, message: '请输入班级考试编号', trigger: 'blur' }
  ],
  computerRoomId: [
    { required: true, message: '请选择机房', trigger: 'change' }
  ],
  examDate: [
    { required: true, message: '请选择考试日期', trigger: 'change' }
  ]
};
// 初始化获取学生信息
onMounted(async () => {
  // 生成默认班级考试编号 - 直接操作 examForm 的响应式数据
  examForm.value.examNumber = `EXAM-${Math.floor(1000 + Math.random() * 9000)}`;

  // 获取机房信息
  try {
    const response = await getComputerRooms();
    console.log('机房数据详情:', {
      rawData: response,
      computerRooms: computerRooms.value,
      firstRoom: computerRooms.value[0]
    });
    computerRooms.value = response.rows || [];
    if (computerRooms.value.length === 0) {
      ElMessage.warning('没有可用的机房数据');
    }
  } catch (error) {
    ElMessage.error('获取机房列表失败: ' + error.message);
    console.error('详细错误:', error);
  }
});
// 封装考试数据
const submitExamConfig = async () => {
  try {
    // 1. 表单验证
    await proxy.$refs.examFormRef.validate()

    // 2. 封装请求数据
    const requestData = {
      examNumber: examForm.value.examNumber,
      lasName: examForm.value.computerRoomId,
      examDate: examForm.value.examDate,
    }

    console.log('提交数据:', requestData)

    // 3. 调用API
    const response = await saveExamConfig(requestData)

    // 4. 处理响应
    if (response.code === 200) {
      ElMessage.success(response.msg || '考试配置保存成功')     //使用 Element Plus 组件库显示成功提示消息
      router.go(-1)       //返回上一级
    } else {
      ElMessage.warning(response.msg || '保存失败')
    }
  } catch (error) {
    if (!error.toString().includes('validation')) {
      ElMessage.error('提交失败: ' + (error.message || '未知错误'))
      console.error('提交错误详情:', error)
    }
  }
}

// 返回按钮
const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.exam-config-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.box-card {
  padding: 20px;
}

.student-info, .exam-config {
  margin-bottom: 30px;
}

h3 {
  margin-bottom: 20px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
</style>